<!--
 * @Author: ChunLai
 * @Date: 2022-01-07 21:25:29
 * @LastEditTime: 2025-04-21 13:48:36
 * @Description: 新版底部按钮
 * @FilePath: \02.bldinsure\src\components\FooterBtns.vue
-->
<template>
  <div class="fix_foot_box footer-component">
    <div class="actionBox">
      <span
        class="btn-span btn-l mr10"
        v-if="btnNum == '2'"
        @click="saveField(vm)"
        >{{ leftText }}</span
      >
      <span
        class="btn-span btn-r"
        :class="{ w80: btnNum == '1' }"
        @click="saveForm(vm)"
      >
        {{ rightText }}
      </span>
    </div>
  </div>
</template>

<script>
import { debounce } from "@/utils/debounce";
export default {
  name: "FooterBtns",
  props: {
    btnNum: {
      type: [String, Number],
      default: "2",
    },
    rightText: {
      type: String,
      default: "提交",
    },
    leftText: {
      type: String,
      default: "暂存",
    },
  },
  data() {
    return {
      vm: this,
    };
  },
  methods: {
    saveField: debounce(
      (vm) => {
        vm.$emit("saveField");
      },
      1000,
      true
    ),
    saveForm: debounce(
      (vm) => {
        vm.$emit("saveForm");
      },
      1000,
      true
    ),
  },
};
</script>

<style lang="less" scoped>
.footer-component {
  .actionBox {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 60px;

    .btn-span {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      height: 40px;
      color: #ffffff;
      font-size: 15px;
      letter-spacing: 2px;
      border-radius: 40px;

      &:active {
        opacity: 0.75;
      }

      &.btn-l {
        background-color: #fa9c33;
      }

      &.btn-r {
        background-image: linear-gradient(to right, #ff462c, #cb1800);
      }

      &.w80 {
        width: 80%;
      }
    }
  }
}
</style>
